9. 纹理encoding和渲染器

您所在的位置：网站首页 › threejs 纹理部分 › 9. 纹理encoding和渲染器

9. 纹理encoding和渲染器

2024-03-14 13:34| 来源: 网络整理| 查看: 265

# 纹理.encoding和渲染器.outputEncoding

如果没有特殊需要，一般为了正常渲染，避免颜色偏差，threejs代码中需要颜色贴图.encoding和渲染器.outputEncoding属性值保持一致。

# 纹理对象Texture颜色空间编码属性.encoding

纹理对象Texture颜色空间 (opens new window)编码属性.encoding有多个属性值，默认值是线性颜色空间THREE.LinearEncoding。

THREE.LinearEncoding：线性颜色空间 THREE.sRGBEncoding：sRGB (opens new window)颜色空间 # 浏览器控制台查看Texture.encoding属性值 const texture = new THREE.TextureLoader().load('./earth.jpg'); texture.encoding = THREE.LinearEncoding;//默认值 // THREE.LinearEncoding变量在threejs内部表示数字3000 console.log('texture.encoding',texture.encoding); // 修改为THREE.sRGBEncoding， texture.encoding = THREE.sRGBEncoding; // THREE.sRGBEncoding变量在threejs内部表示数字3001 console.log('texture.encoding',texture.encoding);

THREE.LinearEncoding、THREE.sRGBEncoding其实在theeejs内部都表示一个数字,具体可以查看src目录下constants.js的源码文件。

// constants.js源码部分截取 export const LinearEncoding = 3000; export const sRGBEncoding = 3001; # gltfmap.encoding值

threejs加载gltf模型，颜色贴图map属性.encoding的默认值是sRGB颜色空间THREE.sRGBEncoding。

// 查看gltf所有颜色贴图的.encoding值 gltf.scene.traverse(function(obj) { if (obj.isMesh) { if(obj.material.map){//判断是否存在贴图 console.log('.encoding',obj.material.map.encoding); } } }); // .encoding显示3001，说明是THREE.sRGBEncoding console.log('.encoding',mesh.material.map.encoding); # WebGL渲染器.outputEncoding

.outputEncoding的默认值是线性空间THREE.LinearEncoding,和纹理对象.encoding默认值一样，如果颜色贴图.encoding的值是THREE.sRGBEncoding，为了避免颜色偏差，.outputEncoding的值也需要设置为THREE.sRGBEncoding。

//解决加载gltf格式模型颜色偏差问题 renderer.outputEncoding = THREE.sRGBEncoding;

注意！最新版本属性名字有改变。渲染器属性名.outputEncoding已经变更为.outputColorSpace，具体参考6.3小节最后说明。

# 单独加载的颜色贴图设置.encoding = THREE.sRGBEncoding

如果webgl渲染器设置了renderer.outputEncoding = THREE.sRGBEncoding;,你单独加载图像返回的纹理对象需要设置 texture.encoding = THREE.sRGBEncoding;

//解决加载gltf格式模型颜色偏差问题 renderer.outputEncoding = THREE.sRGBEncoding; const texture = new THREE.TextureLoader().load('./earth.jpg'); // 和webgl渲染器renderer.outputEncoding一致 texture.encoding = THREE.sRGBEncoding;

注意！！！最新版本，纹理对象属性名.encoding已经变更为.colorSpace。

texture.colorSpace = THREE.SRGBColorSpace;//设置为SRGB颜色空间

【本文地址】

9. 纹理encoding和渲染器

9. 纹理encoding和渲染器

今日新闻

推荐新闻